/**
 *  学习目标：Todos 案例
 */
import React,{useState} from 'react';
import './styles/base.css';
import './styles/index.css';

export default function App() {
  // 2.1 App中声明状态list和初始数据
  const [list, setList] = useState([
    {
      id: 1,
      task: '学习Vue',
      isDone: true,
    },
    {
      id: 2,
      task: '学习React',
      isDone: false,
    },
    {
      id: 3,
      task: '学习ts',
      isDone: false,
    },
  ])
  // 9.1 声明type的状态
  const [type, setType] = useState('all') // all  completed  active
  // 10.1 定义计算属性showList，🔔 计算属性在函数组件中，写在和return同级
  const newShowList=list.filter((item)=>{
    //   active
    if(type==='active') return !item.isDone
    // completed
    if(type==='completed') return item.isDone
    // all
    return item
  })
  // 6.1 在App中定义新增方法
  const handleAdd=(task)=>{
    // 6.5 在新增方法中完成新增逻辑
    const newTask={
        isDone:false,
        id:Date.now(),
        task
    }
    setList([...list,newTask])
  }
  // 4.1 定义删除方法
  const handleDelById=(id)=>{
    const newList=list.filter((item)=>{
        if(item.id!==id) return item
    })
    setList(newList)
  }
  // 3.1. App中定义更新方法
  const handleUpdateById=(id)=>{
      // 3.4. 编写更新的逻辑
    const newList=list.map((item)=>{
        return{
            ...item,
            isDone:item.id===id?!item.isDone:item.isDone
        }
    })
    setList(newList)
  }
  // 2.2 通过父传子传递props.list
  return (
    <section className="todoapp">
        {/* 头部 */}
        <Header 
        // 6.2 父传子Header回调函数
        handleAdd={handleAdd}/>
        {/* 主体 */}
         {/* 3.2 父传子Main接收回调 */}
         {/* 10.2 传给Main组件替换list */}
        <Main list={newShowList} handleUpdateById={handleUpdateById}  // 4.2 父传子
        handleDelById={handleDelById}/>
        {/* 底部 */}
        {/* 9.2 父传子 */}
      {/* 9.4 子传父技术-传setType函数 */}
        <Footer type={type} setType={setType}/>
      </section>
  )
}

function Footer({type,setType}) {
  return <footer className="footer">
    <span className="todo-count">
      <strong>1</strong> 剩余
    </span>
    <ul className="filters">
        {/* 9.3 使用type做排它判断，给a标签设置selected类名 */}
      <li>
          {/* 9.5 通过onClick调用setType修改type的值 */}
        <a 
         onClick={()=>setType('all')} className={type==='all'? "selected":""} href="#/">
          全部
        </a>
      </li>
      <li>
        <a onClick={()=>setType('active')} className={type==='active'?"selected":""} href="#/active">
          未完成
        </a>
      </li>
      <li>
        <a onClick={()=>setType('completed')} className={type==='completed'?"selected":""} href="#/completed">
          已完成
        </a>
      </li>
    </ul>
    <button className="clear-completed">清除已完成</button>
  </footer>;
}

function Main({list,handleUpdateById,handleDelById}) {
  return <section className="main">
    <input id="toggle-all" className="toggle-all" type="checkbox" />
    <label htmlFor="toggle-all">全选</label>
    {/* // 2.3 列表渲染任务 */}
    <ul className="todo-list">
      {list.map((item)=>(
        // 2.4 动态class的设置
        <li className={item.isDone?"completed":""} key={item.id}>
        <div className="view">
          <input className="toggle" type="checkbox" 
          //  3.3 Main中选框触发回调
          onChange={()=>handleUpdateById(item.id)}
          // 💥 记得添上checked属性
          checked={item.isDone}/>
          <label>{item.task}</label>
          <button className="destroy" 
          // 4.3 点击触发回调
          onClick={()=>handleDelById(item.id)}></button>
        </div>
      </li>
      ))}
    </ul>
  </section>;
}

function Header({handleAdd}) {
    const [task, setTask] = useState('')
    const handleKeyDown=(e)=>{
        if(e.keyCode===13){
            handleAdd(task)
            // 6.4 新增后清空输入框的内容
            setTask('')
        }
    }
  return <header className="header">
    <h1>todos</h1>
    <input 
     // 5.1 state控制value或checked
    value={task}
    className="new-todo" placeholder="需要做什么" autoFocus 
    // 5.2 onChange配setState
    onChange={(e)=>setTask(e.target.value)}
    // 6.3 监听键盘事件，回车事件时触发新增方法
    onKeyDown={handleKeyDown}
    />
  </header>;
}

